<template>
  <!---------------------------------------------备注及其他--------------------------------------------------->
  <el-form ref="otherForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <el-divider content-position="left">备注及其他</el-divider>
    <!--特殊关系和影响报关价格-->
    <el-row>
      <el-form-item prop="special">
        <el-tooltip slot="label" effect="light" content="买卖双方是否存在特殊关系">
          <span><i class="el-icon-question theme-color" />特殊关系:</span>
        </el-tooltip>
        <el-radio-group v-model="form.special">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.special" prop="effectDeclarationPrice">
        <el-tooltip slot="label" effect="light" content="此特殊关系是否影响商品报关价格">
          <span><i class="el-icon-question theme-color" />影响报关价:</span>
        </el-tooltip>
        <el-radio-group v-model="form.effectDeclarationPrice">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>
    <!--备注-->
    <el-row>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model.trim="form.remark" type="textarea" :autosize="{ minRows: 5}" maxlength="250" show-word-limit />
      </el-form-item>
    </el-row>
    <!--发票及装箱单-->
    <el-row>
      <el-form-item label="发票:">
        <FileUpload ref="invoiceFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" other-tip="请上传供应商出具的INVOICE" />
      </el-form-item>
      <el-form-item label="装箱单:">
        <FileUpload ref="packingListFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" other-tip="请上传供应商出具的PACKING LIST" />
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import { newValidator } from '@/utils/validate'
export default {
  name: 'BookingOrderHeader',
  components: { FileUpload },
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    // 影响报关价格
    const effectDeclarationPriceValidator = newValidator(() => {
      if (this.form.special) {
        return this.form.effectDeclarationPrice !== ''
      } else {
        return true
      }
    }, '此特殊关系是否影响商品报关价格必选')
    return {
      formRules: {
        special: [{ required: true, message: '买卖双方是否特殊关系必选', trigger: 'change' }],
        effectDeclarationPrice: [{ required: true, validator: effectDeclarationPriceValidator, trigger: 'change' }]
      }
    }
  },
  created() {
  },
  methods: {
    self() {
      return this.$refs.otherForm
    }
  }
}
</script>
